<template>
	<view>
		<view class="topBox">
			<text class="title">登录</text>
			<text class="tipsCh">欢迎来到咪购商务宝</text>
			<text class="tipsEn">Welcome to MiGou</text>
			<image class="logo" src="../../static/7cba9f0f8949db20b4dd36dcbdaa5520.png"></image>
		</view>
		<view class="loginBox">
			<text class="merchantText">商家管理</text>
			<view class="line"></view>
			<view class="account">
				<image src="../../static/icons/merchantLogin-account.png"></image>
				<input type="text" v-model="account" placeholder="请输入账号或手机号"/>
			</view>
			<view class="password">
				<image src="../../static/icons/merchantLogin-password.png"></image>
				<input type="text" v-model="password" placeholder="请输入登录密码" :password="true"/>
			</view>
			<view class="rests">
				<label class="tipsLabel">
					<checkbox class="tipsCheckbox" value="cb" checked="true" color="#FFCC33" style="transform:scale(0.7)" />我已阅读并同意
				</label>
				<text class="agreementText" @click="goPrivacyPolicy">《隐私政策》</text>
				<text class="forgetThePassword" @click="goResetPassword">忘记密码?</text>
			</view>
			<text class="login" @click="login">登录</text>
			<button class="fast" open-type="getPhoneNumber" @getphonenumber="onGetPhoneNumber">手机号快捷登陆</button>
			
			
			<view class="menuBox">
				<view class="agentLogged" @click="goAgentLogged">
					<image src="../../static/icons/merchantLogin-salesman.png"></image>
					<text>业务员登录</text>
				</view>
				<view class="enter">
					<image src="../../static/icons/merchantLogin-enter.png"></image>
					<text>新商家合作</text>
				</view>
			</view>
		</view>
		
	</view>
</template>

<script>
	import {
		merlogin
	} from "@/common/apis/login.js"
	export default {
		data() {
			return {
				account:"",
				password:""
			}
		},
		methods:{
			goAgentLogged(){
				this.$Router.push({
					path: '/pages/index/login'
				})
			},
			goPrivacyPolicy(){
				this.$Router.push({
					path: '/pages/other/protocolRule?type=2'
				})
			},
			goResetPassword(){
				this.$Router.push({
					path: '/pages/index/resetPasswords?type=1'
				})
			},
			onGetPhoneNumber (e) {
				console.log(e.detail.code)  // 动态令牌
				console.log(e.detail.errMsg) // 回调信息（成功失败都会返回）
				console.log(e.detail.errno)  // 错误码（失败时返回）
			},
			login(){
				var that = this;
				if (!that.account) {
					uni.showToast({ title: '请输入您的账号', icon: 'none' });
					return;
				}
				if (!that.password) {
					uni.showToast({ title: '请输入您的密码', icon: 'none' });
					return;
				}
				let postData = {
					"account":that.account,
					"password":that.password
				}
				merlogin(postData).then(res => {
					if (res.status == 200) {
						uni.showToast({ title: '登录成功！', icon: 'none' });
						uni.setStorageSync('mertoken',res.data.token)
						uni.setStorageSync('meruserinfo',res.data.admin)
					
						const now = Math.floor(Date.now() / 1000);
						let expireTime = parseInt(now) + parseInt(res.data.exp)
						uni.setStorageSync('merexp',expireTime)
						
						this.$Router.replaceAll({
							path: '/pages/tabBar/merchant/index'
						})
						
					} else {
						uni.showToast({ title: '提交失败！', icon: 'none' });
					}
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.topBox{
		width: 100%;
		height: 500rpx;
		background-color: #f9c234;
		float: left;
		overflow: hidden;
		.title{
			width: 100%;
			height: 50rpx;
			float: left;
			margin-top: 100rpx;
			font-size: 35rpx;
			color: #fff;
			text-align: center;
			font-weight: bold;
		}
		.tipsCh{
			width: 90%;
			height: 80rpx;
			line-height: 80rpx;
			float: left;
			margin-left: 5%;
			font-size: 50rpx;
			margin-top: 60rpx;
			font-weight: bold;
			color: #fff;
			letter-spacing: 2rpx;
		}
		.tipsEn{
			width: 90%;
			height: 50rpx;
			line-height: 50rpx;
			color: #fff;
			font-size: 30rpx;
			float: left;
			margin-left: 5%;
		}
		.logo{
			width: 350rpx;
			height: 350rpx;
			position: absolute;
			float: right;
			right: -50rpx;
			top: 150rpx;
			opacity: 0.4;
		}
	}
	.loginBox{
		width: 100%;
		position: absolute;
		border-top-right-radius: 50rpx;
		border-top-left-radius: 50rpx;
		top: 390rpx;
		bottom: 0;
		float: left;
		background-color: #fff;
		.merchantText{
			width: 85%;
			height: 100rpx;
			float: left;
			margin-left: 7.5%;
			line-height: 100rpx;
			margin-top: 30rpx;
			font-size: 55rpx;
			color: #f9c234;
			font-weight: bolder;
			letter-spacing: 2rpx;
			z-index: 2;
			position: relative;
		}
		.line{
			position: absolute;
			width: 210rpx;
			height: 35rpx;
			float: left;
			left: 7.5%;
			margin-top: 79rpx;
			margin-left: 30rpx;
			z-index: 0;
			background-color: rgba(255,214,89,0.5);
			z-index: 0;
		}
		.account{
			width: 85%;
			float: left;
			margin-top: 45rpx;
			height: 100rpx;
			background-color: #fff;
			margin-left: 7.5%;
			display: flex;
			align-items: center;
			border-radius: 95rpx;
			border:2rpx solid rgba(255,214,89,0.5);
		}
		.password{
			width: 85%;
			float: left;
			margin-top: 35rpx;
			height: 100rpx;
			background-color: #fff;
			margin-left: 7.5%;
			display: flex;
			align-items: center;
			border-radius: 95rpx;
			border:2rpx solid rgba(255,214,89,0.5);
		}
		.account,.password{
			image{
				width: 50rpx;
				height: 50rpx;
				float: left;
				margin-left: 35rpx;
			}
			input{
				flex: 1;
				margin-right: 35rpx;
				margin-left: 20rpx;
				font-size: 30rpx;
				color: #333;
			}
			input:placeholder{
				color: rgba(150, 150, 150,0.5);
			}
		}
		.rests{
			width: 85%;
			height: 40rpx;
			float: left;
			margin-left: 7.5%;
			margin-top: 25rpx;
			.tipsLabel{
				height: 40rpx;
				line-height: 40rpx;
				float: left;
				width: auto;
				color: #8a8a8a;
				font-size: 24rpx;
				margin-left: 10rpx;
				.tipsCheckbox{
					float: left;
					margin-top: -3rpx;
				}
			}
			.agreementText{
				height: 40rpx;
				line-height: 40rpx;
				float: left;
				width: auto;
				margin-left: 5rpx;
				color: #f9c234;
				font-size: 24rpx;
			}
			.forgetThePassword{
				height: 40rpx;
				line-height: 40rpx;
				float: right;
				width: auto;
				color: #8a8a8a;
				font-size: 24rpx;
				margin-right: 10rpx;
			}
		}
		.login{
			width: 85%;
			height: 90rpx;
			text-align: center;
			line-height: 90rpx;
			margin-left: 7.5%;
			float: left;
			border-radius: 90rpx;
			background: linear-gradient(to right,#ffd659,#f9c234);
			margin-top: 55rpx;
			font-size: 32rpx;
			color: #fff;
		}
		.fast{
			width: 85%;
			height: 90rpx;
			text-align: center;
			line-height: 90rpx;
			margin-left: 7.5%;
			float: left;
			margin-top: 6rpx;
			color:#f9c234;
			font-size: 26rpx;
			background-color: #fff;
			
		}
		.fast::after{
			border:none ;
		}
		.menuBox{
			width: 70%;
			height: 130rpx;
			position: fixed;
			bottom: 50rpx;
			left: 15%;
			float: left;
			image{
				width: 80rpx;
				height: 80rpx;
				float: left;
				margin-left:35rpx;
				margin-top: 10rpx;
			}
			text{
				width: 100%;
				float: left;
				text-align: center;
				height: 30rpx;
				line-height: 30rpx;
				font-size: 23rpx;
				color: #8a8a8a;
			}
			.agentLogged{
				width: 150rpx;
				height: 100%;
				float: left;
			}
			.enter{
				width: 150rpx;
				height: 100%;
				float: right;
			}
		}
	}
</style>